import React,{ Component } from 'react';

import './report.scss';
import Rect from 'components/widget/index/Rect';
import Turnover from 'components/widget/index/Turnover';
import Chart from 'components/widget/Chart'
import '../index/index.scss';
import { getReport, getReportImg } from '@/api/user'

export default class Report extends Component{
  constructor (props) {
    super(props)
    this.state = {
      navList: [
        { name: '汇总', type: 1 },
        { name: '昨日', type: 2 },
        { name: '近7天', type: 3 },
        { name: '近30天', type: 4 }
      ],
      nowType: 1,
      chartData: {
        expectData: {
        },
        browseData: {
          for_company: 1,
          for_me: 1,
          for_product: 1 
        },
        total_number: [],
        time: []
      },
      numberData: [],
      yinshe: {
        browse_card_count: '浏览总量',
        new_caller_count: '客户总量',
        follow_count: '跟进总数',
        save_card_count: '被保存总数',
        forward_card_count: '被转发总数',
        point_count: '被点赞总数'
      }
    }
  }
  goBack () { //返回上一级
    this.props.history .goBack()
  }
  componentDidMount () {
    document.title = '我的报表';
    getReport({type: this.state.nowType}).then(res => {//公司报表
      this.setState({
        numberData: res.data
      })
    })
    getReportImg({type: this.state.nowType}).then(res => {//统计图表
      this.setState({
        chartData: res.data
      })
    })
  }
  changeMyTime (timeType) {
    this.setState({
      nowType: timeType
    }, () => {
      getReport({type: this.state.nowType}).then(res => {
        this.setState({
          numberData: res.data
        })
      })
      getReportImg({type: this.state.nowType}).then(res => {
        this.setState({
          chartData: res.data
        })
      })
    })
  }
  render () {
    let numberData = []
    Object.keys(this.state.numberData).forEach((item, index) => {
      numberData.push({
        name: this.state.yinshe[item],
        number: this.state.numberData[item]
      })
    })
    return (
      <div className="report-group">
        {/*<div className="title">
          <div onClick={this.goBack.bind(this)}><i className="glyphicon glyphicon-left"></i></div>
          <div>我的报表</div>
          <div><i className="glyphicon glyphicon-options"></i></div>
        </div>*/}
        <div className="switch-tap">
          {
            this.state.navList.map((item, index) => {
              return(
                <div onClick={this.changeMyTime.bind(this, item.type)} className={item.type === this.state.nowType ? 'active' : ''} key={index}>{item.name}</div>
              )
            })
          }
        </div>
        <div className="rect-group">
          {
            numberData.map((item, index) => {
              return (
                <Rect data={item} key={index}/>
              )
            })
          }
        </div>
        <div className="turnover-ratio">
          <Turnover data={this.state.chartData.expectData} />
        </div>
        <Chart name='客户兴趣占比' type='pie' data={this.state.chartData.browseData} myclassName='chart1'/>
        <Chart name='近两周客户活跃度' type='line' data={this.state.chartData.total_number} time={this.state.chartData.time} myclassName='chart2'/>
      </div>
    )
  }
}
